<template>
  <div class="container">
    <!-- 整体部分 -->
    <el-card class="box-card">
      <!-- card头部 -->
      <div slot="header" class="clearfix">
        <!-- 顶部表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model="formInline.user" class="ipt"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="formInline.user=''">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 右侧按钮 -->
        <el-button
          style="float: right; padding: 3px 0"
          type="success"
          class="add"
          @click="handleChange('add')"
        >
          <i class="el-icon-edit"></i>
          新增学科</el-button
        >
      </div>
      <!-- card身体 -->
      <!-- 消息提示 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        class="message"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 列表 -->
      <el-table :data="display" style="width: 100%">
        <!-- 序号 -->
        <el-table-column label="序号" width="48">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <!-- 学科名称 -->
        <el-table-column label="学科名称" width="145">
           <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.subjectName }}</span>
          </template>
        </el-table-column>
        <!-- 创建者 -->
        <el-table-column  label="创建者" width="141">
           <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <!-- 创建日期 -->
        <el-table-column  label="日期" width="160">
           <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.addDate }}</span>
          </template>
        </el-table-column>
        <!-- 前台是否显示 -->
        <el-table-column  label="前台是否显示" width="141">
           <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.isFrontDisplay }}</span>
          </template>
        </el-table-column>
        <!-- 二级目录 -->
        <el-table-column  label="二级目录" width="141">
           <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.twoLevelDirectory }}</span>
          </template>
        </el-table-column>
        <!-- 标签 -->
        <el-table-column label="标签" width="141">
           <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tags }}</span>
          </template>
        </el-table-column>
        <!-- 题目数量 -->
        <el-table-column  label="题目数量" width="141">
            <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.totals }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="name" label="操作" width="240">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >学科分类</el-button
            >
            <el-button type="text" size="small" @click="handletags(scope.row)">学科标签</el-button>
            <el-button type="text" size="small" @click="handleChange('chan',scope.row)" >修改</el-button>
            <el-button type="text" size="small" @click="handleDlete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout=" prev, pager, next, sizes, jumper"
        :total="+total"
        class="page"
      >
      </el-pagination>
    </el-card>
    <!-- 弹出框 添加-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="400px">
      <!-- 表单 -->
      <el-form :model="form" :rules="rules" ref="forms">
        <el-form-item label="学科名称" label-width="80px" prop="name">
          <el-input v-model="form.name" placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" class="show" prop="value">
          <el-switch
            v-model="form.value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd(type)">确认</el-button>
      </span>
    </el-dialog>
    <!-- 弹出框 删除 -->
  </div>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      id: null,
      type: 'add',
      title: '新增学科',
      // 头部表单
      formInline: {
        user: '',
        region: ''
      },
      // 列表数据
      list: [],
      // 当前页数
      currentPage: 1,
      // 一共多少条数据
      total: '',
      // 每页数量
      pageSize: 5,
      //  学科名称
      subjectName: '',
      // 弹出框控制
      dialogVisible: false,
      // 表单元素
      form: {
        value: true,
        name: ''
      },
      // 校验规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入学科名称',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    // 处理添加学科
    async handleAdd (type) {
      await this.$refs.forms.validate()
      const flag = this.form.value ? 1 : 0
      if (type === 'add') {
        await add({ subjectName: this.form.name, isFrontDisplay: flag })
      } else {
        await update({ subjectName: this.form.name, isFrontDisplay: flag, id: this.id })
      }
      this.$message.success('操作成功')
      this.render()

      this.dialogVisible = false
    },
    // 搜索内容
    onSubmit () {
      this.subjectName = this.formInline.user
      this.render()
    },
    // 改变每页数量
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val
      this.render()
    },
    // 改变页码
    handleCurrentChange (val) {
      this.currentPage = val
      this.render()
    },
    // 渲染列表
    async render () {
      const { data } = await list({
        page: this.currentPage,
        pagesize: this.pageSize,
        subjectName: this.subjectName
      })
      this.list = data.items
      this.total = data.counts
      this.pages = data.pages
    },
    // 删除列表
    handleDlete (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        this.render()
      })
    },
    // 跳转学科分类
    handleClick (row) {
      this.$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)
    },
    // 跳转学科标签
    handletags (row) {
      this.$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)
    },
    // 修改
    handleChange (tag, row) {
      this.dialogVisible = true
      this.type = tag
      if (!this.$refs.forms === {}) {
        this.$refs.forms.resetFields()
      }
      if (tag === 'add') {
        this.title = '新增学科'
        console.log(this.$refs.forms)
      } else {
        this.id = row.id
        this.form.name = row.subjectName
        this.form.value = row.isFrontDisplay === '是'
        this.title = '修改学科'
      }
    }
  },
  created () {
    this.render()
  },
  computed: {
    display () {
      const newList = this.list.map((item, index) => {
        item.num = index + 1
        item.addDate = item.addDate.replace('T', ' ')
        item.addDate = item.addDate.replace('.000Z', '')
        if (item.isFrontDisplay) {
          item.isFrontDisplay = '是'
        } else {
          item.isFrontDisplay = '否'
        }
        return item
      })
      return newList
    }
  }
}
</script>

<style scoped lang='scss'>
// 头部下内边距
::v-deep .el-card__header {
  height: 70px;
  padding-bottom: 0;
}
// card头部
.clearfix {
  border: none;
  padding-bottom: 0;
  // 右侧表单
  .demo-form-inline {
    display: inline-block;
    margin-left: 12px;
    ::v-deep .el-input__inner {
      height: 32px;
      width: 190px;
    }
    .el-button {
      padding: 9px 15px;
      width: 56px;
      height: 32px;
      font-size: 12px;
    }
  }
  // 左侧新增
  .add {
    vertical-align: middle;
    width: 98px;
    height: 32px;
    font-size: 12px;
  }
}
// 身体上边距
::v-deep .el-card__body {
  padding-top: 0;
}
// 消息提示
.message {
  margin-bottom: 15px;
}
// 表头样式
::v-deep .el-table__header {
  .el-table__cell {
    background-color: #fafafa;
    border-bottom: 2px solid #e8e8e8 !important;
  }
}
// 分页
.page {
  margin-top: 20px;
  text-align: right;
}
// 下一页按钮

::v-deep .el-pagination {
  .btn-prev,
  .btn-next {
    padding: 0;
    background-color: #f4f4f5 !important;
    min-width: 30px;
    border-radius: 2px;
  }
  .el-pager {
    li {
      margin: 0 6px;
      padding: 0;
      background-color: #f4f4f5 !important;
      border-radius: 2px;
      min-width: 30px;
    }
    .active {
      background-color: #409eff !important;
      color: #fff !important;
    }
  }
}
::v-deep .el-button--small {
  font-size: 14px;
}
::v-deep .el-dialog__body {
  .el-input--medium .el-input__inner {
    width: 280px;
  }
}
.show {
  padding-left: 10px;
}
</style>
